<template>
	<div class="wrapper-404">
		<div class="main-404">
			<div class="message">
				<h1>404</h1>
				<h3>页面不存在</h3>
			</div>
			<div class="footer">
				<RouterLink to="/" title="home"> 返回 <span></span> </RouterLink>

				<p class="legal">copyright &copy; 2012&nbsp;-&nbsp;2023南京&trade; 南京爱普雷德电子科技有限公司</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.wrapper-404 {
	background: #000;
	position: absolute;
	margin: 0;
	width: 100%;
	height: 100%;
}

.main-404 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-family: sans-serif;
	max-width: 340px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;

	.message {
		font-size: 16px;
		text-align: center;

		h1 {
			margin: 0;
			padding: 0;
			font-size: 11em;
			transform: skewY(-5deg);
			transition: 0.4s ease-in-out all;

			&:hover {
				text-shadow: 20px 20px 0 fade(#afd33d, 10%);
			}

			@media (max-width: 300px) {
				font-size: 50vw;
			}
		}

		h3 {
			color: #afd33d;
			font-size: 0.9em;
			font-weight: lighter;
			line-height: 1;

			@media (max-width: 300px) {
				font-size: 5vw;
			}
		}
	}

	.footer {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;

		a {
			position: relative;
			flex: 1;
			color: rgba(255, 255, 255, 0.6);
			text-decoration: none;
			border-radius: 3px;
			border: 1px solid rgba(255, 255, 255, 0.6);
			margin: 0 20px;
			text-align: center;
			padding: 10px 0;
			overflow: hidden;
			transition: all 0.2s ease-in-out;
			z-index: 3;

			@media (max-width: 300px) {
				flex: 5 100%;
				width: 100%;
			}

			&:hover {
				border: 1px solid rgba(255, 255, 255, 1);
				color: #121212;

				span {
					width: 310px;
					height: 310px;
				}
			}

			span {
				content: '';
				position: absolute;
				background: #afd33d;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 0;
				height: 0;
				border-radius: 50%;
				transition: all 0.5s ease;
				z-index: -1;

				@media (max-width: 300px) {
					transition: all 0.2s ease-in;
				}

				&:active {
					background: lighten(#afd33d, 10%);
				}
			}
		}

		.legal {
			text-align: center;
			flex: 3;
			color: fade(#ccc, 50%);

			@media (max-width: 300px) {
				font-size: 4vw;
				flex: 5 100%;
				padding: 5px 10px;
			}
		}
	}
}
</style>
